<template>
  <div class="box">
    <div id="mytimeLine" class="myChart"></div>
  </div>
</template>

<script>
  require("vis-timeline/dist/vis-timeline-graph2d.min.css");
  const vis = require("vis-timeline/dist/vis-timeline-graph2d.min");
  export default {
    data() {
      return {}
    },
    mounted() {
      this.makeVis();
    },
    methods: {
      makeVis() {
        var container = document.getElementById('mytimeLine');

        var items = new vis.DataSet([{
            id: 1,
            content: 'item 1',
            start: '2013-04-20',
            style: "color: #fff; background-color: green;",
            selectable: false
          },
          {
            id: 2,
            content: 'item 2',
            start: '2013-04-14'
          },
          {
            id: 3,
            content: 'item 3',
            start: '2013-04-18'
          },
          {
            id: 4,
            content: 'item 4',
            start: '2013-04-16',
            end: '2013-04-19',
            align: "left",
          },
          {
            id: 5,
            content: 'item 5',
            start: '2013-04-15',
            end: '2013-04-19',
          },
          {
            id: 6,
            content: 'item 6',
            start: '2013-04-27'
          }
        ]);

        var options = {
          width: '100%',
          height: '300px',
          align: 'right',
          margin: {
            item: 20
          }
        };

        var timeline = new vis.Timeline(container, items, options);
      }
    }
  }
</script>

<style>
  .box {
    width: 100%;
    height: 100%;
  }

  .myChart {
    width: 100%;
    height: 100%;
  }
</style>
